<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/common/heard.jsp"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>在此处插入标题</title>
<style type="text/css">
.noborder{
	border-style:none
}
.border{
	border-style:1px
}
</style>
<script type="text/javascript">
var list_url="${basePath}shuo/toShuoUI.shtml";
	
	//改变文本匡的只读属性
	function changeReadonly(id){
		$("textarea").attr("readonly",true);
		$("textarea").attr("class","noborder");
		$("#text_"+id).attr("readonly",false);
		$("#text_"+id).attr("class","border");
		$("#newShuo").attr("class","border");
		$("#newShuo").attr("readonly",false);
	}
	//当焦点离开文本的时候
	function updateShuo(id){
		//将当前的文本匡边框消失并且设置未只读
		//判断时候打开了其是否是只读属性
		var b=$("#text_"+id).attr("readonly");
		if(b==undefined){
			var content=$("#text_"+id).val();
			//异步提交
			$.ajax({
				url:"${basePath}shuo/admin/updateShuo.shtml",
				data:{"id":id,"content":content},
				type:"post",
				success:function(msg){
					if("更新成功" ==msg){
						alert("更新成功");
						
					}else{
						if("不需要更新" !=msg){
							alert("更新失败");
						}
					}
					$("#text_"+id).attr("readonly",true);
					$("#text_"+id).attr("class","noborder");
				},
				error:function(){
					alert("更新失败");
				}
			});
		}else{
			return ;
		}
	}
	function deleteShuo(id){
		document.forms[0].action = "${basePath}shuo/admin/deleteShuo.shtml?id="+id;
  		document.forms[0].submit();
	}
	function addShuo(){
		var content= $("#newShuo").val();
		window.location.href="${basePath}shuo/admin/addShuo.shtml?content="+content;
	}
</script>
</head>
<body>
	<div class="container-fluid">
	<form action="" method="post">
	<div class="row">
	   <table class="table table-bordered">
	   		
					<tr class="info">
						<th align="center">说说内容</th>
						<th width="140">说说时间</th>
						<th width="80">操作</th>
					</tr>
					<c:forEach var="shuo" items="${page.itmes }">
					<tr>
						<td>
						<textarea id="text_${shuo.id }" class="noborder" rows="3" cols="50" style="width:100%;height:50px;" readonly="true" onblur="updateShuo('${shuo.id}')" ondblclick="changeReadonly('${shuo.id}')">${shuo.content }</textarea>
						
						<td><fmt:formatDate value="${shuo.createTime }" pattern="yyyy-MM-dd"/> </td>
						<td>
							<button type="button" class="btn btn-info" value="提交" onclick="deleteShuo('${shuo.id}')">删除</button>
							&nbsp;&nbsp;&nbsp;&nbsp;
			
						</td>
					</tr>
					</c:forEach>
		   </table>
		  </div> 	
		   <jsp:include page="/common/page.jsp"></jsp:include>
		</form>	
			
				<table class="table table-bordered">
					<tr>
						<td width="200px" class="danger">
							发表说说
						</td>
						<td>
						 <textarea id="newShuo" rows="5" cols="10" style="width:100%;height:160px;"></textarea>
						</td>
					</tr>
						
				</table>
			
				<div style="text-align:center">
					<button type="button" class="btn btn-info" value="提交" onclick="addShuo()" >提交</button>
				</div>
		</div>	
		
	
</body>
</html>